<template>
  <div class="app-container">
    <div class="searchBox">
      <el-form :inline="true" :model="search" ref="searchForm">
        <el-form-item label="类型名称：" prop="name">
          <el-input v-model="search.name" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="类型编码：" prop="code">
          <el-input v-model="search.code" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item style="margin-top: -2px">
          <el-button type="primary" @click="searchQuery">查询</el-button>
          <el-button type="info" @click="search = {};searchQuery()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <qm-table
      :data="query"
      keyProp="typeId"
      :formOptions="{ labelWidth: '120px' }"
      :menuOptions="{ width: 230 }"
      menuType="text"
      :rules="rules"
    >
      <qm-table-column field="name" sortable>字典类型名称</qm-table-column>
      <qm-table-column field="code" sortable>字典类型编码</qm-table-column>
      <template v-slot:moreBtn="{ row }">
        <el-button type="text" @click="tree(row)">树状视图</el-button>
      </template>
      <template v-slot:form="{ model, viewModel }">
        <el-row>
          <el-col :span="12">
            <el-form-item label="名称：" prop="model.name">
              <el-input v-model="model.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="编码：" prop="model.code">
              <el-input v-model="model.code"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="字典类型备注：" prop="model.memo">
              <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 20}" v-model="model.memo"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="viewModel.pageAction === 'view'">
          <el-col :span="12">
            <el-form-item label="创建时间：" prop="model.createdDate">
              <el-date-picker type="datetime" v-model="model.createdDate" style="width: 100%"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="更新时间：" prop="model.updatedDate">
              <el-date-picker type="datetime" v-model="model.updatedDate" style="width: 100%"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
    </qm-table>

    <get-tree v-model="treeVisible" :typeId="typeId" @cancel="treeVisible = false"></get-tree>
  </div>
</template>

<script>
import Controller from "@/libs/framework/controller";
import GetTree from "@/views/admin/sysDictItem/getTree";

export default class Instance extends Controller {
  onBeforeInit() {
    this.urls = {
      query: [{ url: "/admin/sysDictType/query", method: "post" }],
      save: "/admin/sysDictType/save",
      delete: "/admin/sysDictType/delete",
      entity: "/admin/sysDictType/getEntity",
    };
  }

  mixin() {
    return {
      components: {
        GetTree,
      },
      data() {
        return {
          treeVisible: false,
          typeId: "",
          rules: {
            model: {
              name: [
                {
                  required: true,
                  message: "这是必填字段",
                  trigger: "blur",
                },
              ],
              code: [
                {
                  required: true,
                  message: "这是必填字段",
                  trigger: "blur",
                },
              ],
            },
          },
        };
      },
      methods: {
        tree(row) {
          this.typeId = row.typeId;
          this.treeVisible = true;
        },
      },
    };
  }
}
</script>

<style scoped lang="scss">
</style>

